<template>
  <div class="container">
    <div class="My-top">
      <div class="ziliao">
        <div class="touxiang" @click = "godenglu">
          <van-image
            round
            width="100px"
            height="100px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <div class="bianji" @click="gomydata"><button class="bjzl">编辑资料</button></div>
      </div>
      <div class="dbdz">
        <div>
          <p>1</p>
          <p>发布</p>
        </div>
        <div>
          <p>3</p>
          <p>获赞</p>
        </div>
      </div>
    </div>
    <div class="xia">
      <div>
        <div class="dbdz z">
          <div>
            <van-icon name="star-o" size="35px" color="orange" />
            <p>收藏</p>
          </div>
          <div>
            <van-icon name="underway-o" size="35px" color="orange" />
            <p>历史</p>
          </div>
        </div>
        <van-cell title="修改密码" is-link />
        <van-cell title="联系我们" is-link />
        <van-cell title="关于我们" is-link />

      </div>
    </div>
       <div class="tuichu">退出登录</div>

    <Menu></Menu>
  </div>
</template>

<script>
import Menu from "../components/menu.vue";
import { Icon } from "vant";
import { Cell, CellGroup } from "vant";
export default {
  components: {
    Menu,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
  },
  methods: {
    godenglu(){
        this.$router.push('/login');
    },
    gomydata(){
        this.$router.push('/Mydata');
    }
  },
};
</script>

<style>
.container {
  background: rgb(245, 247, 249);
  height: 100vh;
}

.My-top {
  width: 100%;
  height: 190px;
  background: url(../assets/banner.jpg) no-repeat;
}
.ziliao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 4vw;
  padding-top: 10px;
}

.bianji {
  font-size: 12px;
  color: grey;
}
.bjzl {
    padding: 2px;
    border: 0;
  border-radius: 10px;
}
.dbdz {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  text-align: center;
}
.xia{
    background: white;
}
.dbdz p {
  margin: 5px;
  color: #fff;
}
.z p {
  color: black;
}
.tuichu {
  color: red;
  line-height: 40px;
  text-align: center;
  margin-top: 20px;
  width: 100%;
  height: 40px;
  background: white;
}
</style>